<template>
    <section class="form-container">
        <el-row>
            <el-col :span="12" style="padding:10px;">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>{{detail.orderInfo.lineSectionName}} {{detail.orderInfo.startTime}}</span>
                    <div style="float: right; padding: 3px 0" type="text">{{detail.orderInfo.orderNo}}</div>
                  </div>
                  <el-table
                      ref="multipleTable"
                      :data="detail.passengerList"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="orderPassengerChange">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column prop="name" label="姓名"> </el-table-column>
                      <el-table-column prop="seatName" label="座位号"> </el-table-column>
                      <el-table-column prop="seatPrice" label="座位费"> </el-table-column>
                      <el-table-column prop="discountMoney" label="优惠"> </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12" style="padding:10px;">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>改签到：{{arrangeSectionInfo.lineSectionName}}  {{arrangeSectionInfo.startTimeFormat}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="showArrange">选择班次</el-button>
                  </div>
                  <el-table
                      v-loading="loading"
                      style="width: 100%"
                      :data="arrangeSectionSeatList"
                      border
                      stripe
                      @selection-change="arrangeSeatChange"

                  >
                        <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
                        <el-table-column prop="seatName" label="座位名称"/>
                        <el-table-column prop="seatPrice" label="价格"/>
                        <el-table-column prop="status" label="售座类型">
                              <template #default="scope">
                                  <el-tag :type="scope.row.saleTicketTypeStyle">
                                      {{ scope.row.saleTicketTypeName }}
                                  </el-tag>
                              </template>
                        </el-table-column>
                      <el-table-column prop="status" label="状态">
                          <template #default="scope">
                              <el-tag :type="scope.row.statusStyle">
                                  {{ scope.row.statusName }}
                              </el-tag>
                          </template>
                      </el-table-column>
                  </el-table>

                </el-card>
            </el-col>
        </el-row>
        <div style="text-align:center; padding:30px 0;">
            <el-popconfirm title="确定改签吗？" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">改签</el-button>
            </el-popconfirm>
        </div>
        <SelArrange ref="selArrangeRef" @refresh="setArrangeSection" />
    </section>
</template>

<script>
    import { TicketOrderApi } from '@/api/intercity/TicketOrderApi'
    import {ArrangeSectionSeatApi} from '@/api/intercity/ArrangeSectionSeatApi'
    import SelArrange from '../arrange/SelArrange.vue'
    import { Common } from '@/utils/common'

    export default {
        name: 'TicketOrderChange',
        components: { SelArrange },
        data() {
            return {
                form: {
                    orderNo:'',
                    orderPassengerIds:[],
                    arrangeSectionCode:'',
                    arrangeSectionSeatCodes:[]
                },
                detail: {orderInfo:{}},
                arrangeSectionInfo:{},
                arrangeSectionSeatList:[],
                multipleSelection: [],
                loading:false
            }
        },
        created() {
            this.form.orderNo = this.$router.currentRoute.query.orderNo
            TicketOrderApi.getDetail(this.form.orderNo).then((response) => {
                response.passengerList.forEach(function(item){
                    item.seatPrice = item.seatPrice/100
                    item.discountMoney = item.discountMoney/100
                })
                this.detail = response
            })
        },
        methods: {
            showArrange() {
                this.$refs['selArrangeRef'].show()
            },
            setArrangeSection(arrangeSectionInfo){
                this.arrangeSectionInfo = arrangeSectionInfo
                this.form.arrangeSectionCode = this.arrangeSectionInfo.arrangeSectionCode
                this.getSeatList()
            },

            // 获取用户列表
            getSeatList() {
                this.loading = true
                ArrangeSectionSeatApi.getList(this.arrangeSectionInfo.arrangeSectionCode).then((response) => {
                    response.forEach(function(item){
                        item.seatPrice = item.seatPrice/100
                    })
                    this.arrangeSectionSeatList = response.filter(function(item){ return !item.isDriverSeat})
                    this.loading = false
                }).catch((err) => {
                    this.loading = false
                })
            },

            // 提交表单
            submitForm() {
                const that = this

                let data = Common.deepClone(that.form)

                if(data.orderPassengerIds.length != data.arrangeSectionSeatCodes.length){
                    this.$message.error('改签乘客数与座位数不等');
                    return false
                }

                TicketOrderApi.change(data).then(() => {
                    // 调用全局挂载的方法,关闭当前标签页
                    this.$store.dispatch('tagsView/delView', this.$route)
                    // 返回上一步路由，返回上一个标签页
                    this.$router.go(-1)
                })
            },
            orderPassengerChange(val) {
                this.form.orderPassengerIds = val.map(item=>item.id)
            },
            arrangeSeatChange(val) {
                this.form.arrangeSectionSeatCodes = val.map(item=>item.seatCode)
            },
            checkSelectable(row, index) {
              // 假设我们不想让年龄大于等于30的行可选
              return row.status == 1
            }
        }
    }
</script>
